<template>
  <div class="global-box">
    <a-form-model
      class="exam"
      ref="queryParam"
      :model="queryParam"
      :rules="examFormRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="考试名称" prop="name">
        <a-input v-model="queryParam.name" placeholder="请输入考试名称" />
      </a-form-model-item>
      <a-form-model-item label="考试目录" prop="directory">
        <a-cascader
          :field-names="{ label: 'value', value: 'id', children: 'children' }"
          :options="directoryOptions"
          :load-data="loadData"
          placeholder="请选择考试目录"
          change-on-select
          @change="getPreset"
          v-model="queryParam.directory"
        />
      </a-form-model-item>
      <a-form-model-item label="所属考试预设" prop="selectedRows">
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :rowSelection="{ onChange: onSelectChange, type: 'radio' }"
        >
        </a-table>
      </a-form-model-item>
      <a-form-model-item label="考期" prop="exam">
        <a-select v-model="queryParam.exam" placeholder="请选择考期">
          <a-select-option :key="item.value" :value="item.value" v-for="item in yearList">{{
            item.label
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="报名日期" prop="apply" class="mdate">
        <a-radio-group v-model="queryParam.apply" @change="applyChange">
          <a-radio :value="item.value" v-for="item in dateList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item
        label="报名日期"
        prop="applyDate"
        class="gdate"
        :class="queryParam.apply === 0 ? 'wdate' : ''"
      >
        <a-range-picker
          type="date"
          format="YYYY-MM-DD"
          v-model="queryParam.applyDate"
          @change="applyDateChange"
        />
        <a-form-model-item label="报名日期" prop="applyInput" v-if="queryParam.apply === 0">
          <a-input placeholder="请输入" class="input" v-model="queryParam.applyInput"></a-input>
        </a-form-model-item>
      </a-form-model-item>
      <a-form-model-item label="考试日期" prop="test" class="mdate">
        <a-radio-group v-model="queryParam.test" @change="testChange">
          <a-radio :value="item.value" v-for="item in dateList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item
        label="考试日期"
        prop="testDate"
        class="gdate"
        :class="queryParam.test === 0 ? 'wdate' : ''"
      >
        <!-- :disabled-date="disabledDate" -->
        <a-range-picker
          type="date"
          format="YYYY-MM-DD"
          v-model="queryParam.testDate"
          @change="testDateChange"
        />
        <a-form-model-item label="考试日期" prop="testInput" v-if="queryParam.test === 0">
          <a-input placeholder="请输入" class="input" v-model="queryParam.testInput"></a-input>
        </a-form-model-item>
      </a-form-model-item>
      <a-form-model-item label="成绩公布日期" prop="release" class="mdate">
        <a-radio-group v-model="queryParam.release" @change="releaseChange">
          <a-radio :value="item.value" v-for="item in dateList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item
        label="成绩公布日期"
        prop="releaseDate"
        class="gdate"
        :class="queryParam.release === 0 ? 'wdate' : ''"
      >
        <!-- :disabled-date="disabledDate" -->
        <a-range-picker
          type="date"
          format="YYYY-MM-DD"
          v-model="queryParam.releaseDate"
          @change="releaseDateChange"
        />
        <a-form-model-item label="成绩公布日期" prop="releaseInput" v-if="queryParam.release === 0">
          <a-input placeholder="请输入" class="input" v-model="queryParam.releaseInput"></a-input>
        </a-form-model-item>
      </a-form-model-item>
      <a-form-model-item label="启用状态" prop="status">
        <a-radio-group v-model="queryParam.status">
          <a-radio :value="item.value" :key="item.value" v-for="item in statusList">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import moment from 'moment'
import { directory, edit, preset, add } from '@/api/examination/exam'
const columns = [
  {
    title: '报名日期',
    dataIndex: 'name',
    align: 'center',
    width: '100px'
  },
  {
    title: '考试日期',
    dataIndex: 'age',
    align: 'center',
    width: '100px'
  },
  {
    title: '成绩公布日期',
    dataIndex: 'address',
    align: 'center'
  }
]
export default {
  data () {
    return {
      columns,
      data: [],
      moment,
      selectedRows: [],
      labelCol: { span: 3 },
      wrapperCol: { span: 6 },
      directoryOptions: [],
      dateList: [{
        label: '已公布日期',
        value: 1
      }, {
        label: '未公布日期',
        value: 0
      }],
      queryParam: {
        name: '',
        directory: [],
        type: undefined,
        exam: undefined,
        apply: 1,
        applyDate: undefined,
        applyInput: '',
        test: 1,
        testDate: undefined,
        testInput: '',
        release: 1,
        releaseDate: undefined,
        releaseInput: '',
        status: 1,
        input: '',
        id: '',
        examinationPresetId: ''
      },
      examFormRules: {
        name: [{ required: true, message: '请输入考试名称', trigger: 'blur' }],
        directory: [{ required: true, message: '请选择考试目录', trigger: 'change' }],
        exam: [{ required: true, message: '请选择考期', trigger: 'blur' }],
        apply: [{ required: true, message: '请输入课程排序', trigger: 'change' }],
        applyDate: [{ required: true, message: '请选择报名日期', trigger: 'change' }],
        applyInput: [{ required: true, message: '请输入未公布日期', trigger: 'blur' }],
        test: [{ required: true, message: '请输入课程排序', trigger: 'change' }],
        testDate: [{ required: true, message: '请选择考试日期', trigger: 'change' }],
        testInput: [{ required: true, message: '请输入未公布日期', trigger: 'blur' }],
        release: [{ required: true, message: '请输入课程排序', trigger: 'change' }],
        releaseDate: [{ required: true, message: '请选择成绩公布日期', trigger: 'change' }],
        releaseInput: [{ required: true, message: '请输入未公布日期', trigger: 'blur' }],
        status: [{ required: true, message: '请选择启用状态', trigger: 'change' }],
        input: [{ required: true, message: '请选择考期', trigger: 'blur' }]
      },
      editData: '',
      oldExamId: '',
      statusList: [{
        label: '启用',
        value: 1
      }, {
        label: '禁用',
        value: 0
      }],
      yearList: [{
        label: 2020,
        value: 2020
      }, {
        label: 2021,
        value: 2021
      }, {
        label: 2022,
        value: 2022
      }, {
        label: 2023,
        value: 2023
      }, {
        label: 2024,
        value: 2024
      }, {
        label: 2025,
        value: 2025
      }, {
        label: 2026,
        value: 2026
      }, {
        label: 2027,
        value: 2027
      }, {
        label: 2028,
        value: 2028
      }, {
        label: 2029,
        value: 2029
      }, {
        label: 2030,
        value: 2030
      }]
    }
  },
  filters: {
    strings: (val) => {
      return val && val.split(' ')[0]
    }
  },
  mounted () {
    this.getDirectory()
    if (this.$route.params.re && this.$route.params.re !== '') {
      this.editData = this.$route.params.re
      this.getData()
    }
  },
  methods: {
    getData () {
      console.log(this.editData)
      this.queryParam.status = this.editData.enable
      if (this.editData.directoryId !== 0) {
        this.queryParam.directory[0] = this.editData.directoryId
      }
      if (this.editData.examId !== 0) {
        this.queryParam.directory[1] = this.editData.directoryId
      }
      if (this.editData.examinationYear !== 0) {
        this.queryParam.exam = this.editData.examinationYear
      }
      if (this.editData.examinationName) {
        this.queryParam.name = this.editData.examinationName
      }
      if (this.editData.examinationPresetId) {
        this.queryParam.examinationPresetId = this.editData.examinationPresetId
      }
      // 报名日期 已公布
      if (this.editData.bmPublishedStartTime && this.editData.bmPublishedEndTime) {
        this.queryParam.applyDate = (this.editData.bmPublishedStartTime + ',' + this.editData.bmPublishedEndTime).split(',')
        this.queryParam.apply = 1
      }
      // 报名日期 未公布
      if (this.editData.bmNotPublishedStartTime && this.editData.bmNotPublishedEndTime) {
        this.queryParam.applyDate = (this.editData.bmNotPublishedStartTime + ',' + this.editData.bmNotPublishedEndTime).split(',')
        this.queryParam.apply = 0
        this.queryParam.applyInput = this.editData.bmNote
      }
      // 考试日期 已公布
      if (this.editData.ksPublishedStartTime && this.editData.ksPublishedEndTime) {
        this.queryParam.testDate = (this.editData.ksPublishedStartTime + ',' + this.editData.ksPublishedEndTime).split(',')
        this.queryParam.test = 1
      }
      // 考试日期 未公布
      if (this.editData.ksNotPublishedStartTime && this.editData.ksNotPublishedEndTime) {
        this.queryParam.testDate = (this.editData.ksNotPublishedStartTime + ',' + this.editData.ksNotPublishedEndTime).split(',')
        this.queryParam.test = 0
        this.queryParam.testInput = this.editData.ksNote
      }
      // 成绩公布日期 已公布
      if (this.editData.cjPublishedStartTime && this.editData.cjPublishedEndTime) {
        this.queryParam.releaseDate = (this.editData.cjPublishedStartTime + ',' + this.editData.cjPublishedEndTime).split(',')
        this.queryParam.release = 1
      }
      // 成绩公布日期 未公布
      if (this.editData.cjNotPublishedStartTime && this.editData.cjNotPublishedEndTime) {
        this.queryParam.releaseDate = (this.editData.cjNotPublishedStartTime + ',' + this.editData.cjNotPublishedEndTime).split(',')
        this.queryParam.release = 0
        this.queryParam.releaseInput = this.editData.cjNote
      }
      console.log(this.queryParam)
    },
    // 当前日期之前禁止 选中
    disabledDate (current) {
      return current && current < moment().endOf('day')
    },
    // 表格全选
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
    },
    onSubmit () {
      this.$refs.queryParam.validate(valid => {
        if (valid) {
          this.save()
        } else {
          return false
        }
      })
    },
    // 获取日期格式
    applyDateChange (val, dateString) {
      this.queryParam.applyDate = dateString
    },
    testDateChange (val, dateString) {
      this.queryParam.testDate = dateString
    },
    releaseDateChange (val, dateString) {
      this.queryParam.releaseDate = dateString
    },
    // 日期切换
    applyChange () {
      this.queryParam.applyDate = undefined
      this.queryParam.applyInput = ''
    },
    testChange () {
      this.queryParam.testDate = undefined
      this.queryParam.testInput = ''
    },
    releaseChange () {
      this.queryParam.releaseDate = undefined
      this.queryParam.releaseInput = ''
    },
    save () {
      const data = {
        examinationName: this.queryParam.name,
        directoryId: this.queryParam.directory[0],
        directoryName: '',
        examinationYear: Number(this.queryParam.exam),
        enable: this.queryParam.status,
        examinationPresetId: 1,
        creatorId: 3645276,
        yearType: 0
      }
      if (this.queryParam.directory[1]) {
        data.examId = this.queryParam.directory[1]
        data.examName = ''
      }
      if (this.queryParam.apply === 1) {
        data.bmPublishedEndTime = this.queryParam.applyDate[1] + ' 00:00:00'
        data.bmPublishedStartTime = this.queryParam.applyDate[0] + ' 00:00:00'
        data.bmNote = ''
      } else {
        data.bmNotPublishedEndTime = this.queryParam.applyDate[1] + ' 00:00:00'
        data.bmNotPublishedStartTime = this.queryParam.applyDate[0] + ' 00:00:00'
        data.bmNote = this.queryParam.applyInput
      }
      if (this.queryParam.test === 1) {
        data.ksPublishedEndTime = this.queryParam.testDate[1] + ' 00:00:00'
        data.ksPublishedStartTime = this.queryParam.testDate[0] + ' 00:00:00'
        data.ksNote = ''
      } else {
        data.ksNotPublishedEndTime = this.queryParam.testDate[1] + ' 00:00:00'
        data.ksNotPublishedStartTime = this.queryParam.testDate[0] + ' 00:00:00'
        data.ksNote = this.queryParam.testInput
      }
      if (this.queryParam.release === 1) {
        data.cjPublishedEndTime = this.queryParam.releaseDate[1] + ' 00:00:00'
        data.cjPublishedStartTime = this.queryParam.releaseDate[0] + ' 00:00:00'
        data.cjNote = ''
      } else {
        data.cjNotPublishedEndTime = this.queryParam.releaseDate[1] + ' 00:00:00'
        data.cjNotPublishedStartTime = this.queryParam.releaseDate[0] + ' 00:00:00'
        data.cjNote = this.queryParam.releaseInput
      }
      if (this.editData === '') {
        add(data).then(res => {
          if (res.code === '1') {
            this.$message.success(res.msg)
            this.$router.push({
              name: 'exam'
            })
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      } else {
        data.id = this.editData.id
        edit(data).then(res => {
          if (res.code === '1') {
            this.$message.success(res.msg)
            this.$router.push({
              name: 'exam'
            })
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      }
    },
    // 获取所属考试预设
    getPreset () {
      if (!this.queryParam.directory[0] || !this.queryParam.directory[1]) {
        return false
      }
      if (this.oldExamId === this.queryParam.directory[1]) {
        return false
      }
      const data = {
        directoryId: this.queryParam.directory[0],
        examId: this.queryParam.directory[1]
      }
      preset(data).then(res => {
        if (res.code === '1') {
          this.oldExamId = this.queryParam.directory[1]
          this.data = res.data
          if (res.data.length === 0) {
            this.$message.error('暂无预设考试，请到考试预设中添加')
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 获取课程目录
    getDirectory () {
      const data = {
        type: 0,
        directoryLevel: 1
      }
      directory(data).then(res => {
        if (res.code === '1') {
          res.data.forEach(item => {
            item.isLeaf = false
          })
          this.directoryOptions = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 课程目录二级
    loadData (selectedOptions) {
      if (this.queryParam.directory[1]) {
        return false
      }
      const targetOption = selectedOptions[selectedOptions.length - 1]
      const data = {
        type: 1,
        parentId: targetOption.id,
        directoryLevel: 2
      }
      targetOption.loading = true
      directory(data).then(res => {
        if (res.code === '1') {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              item.isLeaf = false
            })
            targetOption.loading = false
            targetOption.children = [...res.data]
          } else {
            targetOption.loading = false
            this.$message.error('暂无更多数据')
          }
        } else {
          targetOption.loading = false
          this.$message.error(res.msg)
        }
        this.directoryOptions = [...this.directoryOptions]
      }).catch(err => {
        this.$message.error(err.msg)
        targetOption.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.exam {
  margin-top: 40px;
}
</style>
<style lang="less">
.exam {
  margin-top: 40px;
  .gdate {
    .ant-col {
      label {
        display: none;
      }
    }
    .ant-calendar-picker {
      width: 100%;
    }
  }
  .wdate {
    .ant-calendar-picker {
      width: 50%;
    }
    .ant-form-item {
      width: 48%;
      margin-left: 1.5%;
      display: inline-block;
      margin-bottom: 0;
      .ant-form-item-label {
        display: none;
      }
    }

    .ant-form-item-control > .ant-form-explain {
      height: 22px;
      position: absolute;
      top: 42px;
      left: 0;
    }
    &.ant-form-item-with-help {
      height: 59px;
    }
  }
  .mdate {
    margin-bottom: 0;
  }
}
</style>
